<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Jxm">
        <script src="../jQuery/jquery-3.1.1.js"></script>
        <title></title>
        <style>
        body{
            width: 100%;
            height: 100%;
        }
         div{
             width: 400px;
             height: 260px;
             text-align: center;
             border: 1px solid #999;
             margin: 400px auto;
             display: none;
         } 
         div>span{
             display: inline-block;
             width: 100%;
             height: 50px;
             background-color: #ccc;
             line-height: 50px;
             text-align: center;
         }  
         p{
             margin: 30px;
             text-align: center;
         }
         label{
             margin-right: 10px;
         }
         input{
             width: 260px;
             height: 26px;
         }
         div>button{
             width: 260px;
             height: 40px;
             background-color: #ccc;
             line-height: 40px;
             text-align: center;
             border: none;
         }
         #btn{
             position: absolute;
             top: 1000px;
             left: 700px;
         }
        </style>
    </head>
    <body>
        <div>
           <span>用户登录</span> 
           <p><label for="">账户</label><input type="text" name="" value="" placeholder="请输入用户名"></p>
           <p><label for="">密码</label><input type="text" name="" value="" placeholder="请输入密码"></p>
           <button type="button">登录</button>
        </div>
        <button type="button" id="btn">登录</button>
    </body>
</html>

<script>
    
    $('button').click(function(){
        $('div').css('display','block')
    })

</script>